.bugModalForm {
    /* ng-message(s) */
    .ng-message-wrapper {
        position: relative;
        margin-bottom: .4em;
    }

    [ng-messages] {
        position: absolute;
        top: 100%;
        left: 0px;
        width: 100%;
        z-index: 2;

        display: inline-flex;
        flex-direction: row;
        align-items: center;
        margin: 0.3em 0 0 0 !important;
        font-weight: bold;
        line-height: .9em;
        font-size: .8em;
        color: $red;
    }

    [ng-messages] [ng-message] {
        margin: 0 !important;
    }

    [ng-messages] * [ng-message]:not(:last-of-type):after {
        content:", ";
        margin-right: .4em;
    }

    /* inputs */

    input { padding: 0 .8em }
    textarea { padding: .4em .8em }

    input:focus,
    textarea:focus,
    form .pm_select select:focus {
        border-color: $primary;
        box-shadow: inset 0 1px 2px rgba($primary, .3), 0 0 0 0.2em rgba($primary, .3)
    }

    input:focus,
    textarea:focus { background-color: #FFF }


    /* STATES */

    .ng-valid + [ng-messages],
    .ng-dirty + [ng-messages],
    .ng-untouched + [ng-messages],
    .ng-invalid [ng-message-warning] { opacity: 0 }

    /* touched inputs || submitted form */
    .ng-touched.ng-invalid:not(:focus) ~ [ng-messages],
    .ng-submitted .ng-invalid:not(:focus) ~ [ng-messages],
    .ng-touched[class*='ng-warning']:not(:focus) ~ [ng-messages],
    .ng-submitted [class*='ng-warning']:not(:focus) ~ [ng-messages]  { opacity: 1 }

    /* inputs colors */
    .ng-touched.ng-invalid:not(:focus),
    .ng-submitted .ng-invalid:not(:focus) {
        border-color: $red;
        box-shadow: inset 0 1px 2px rgba($red, .3), 0 0 0 0.2em rgba($red, .3);
    }

    // Don't show the typo warning
    .ng-messages-warning { display: none; }
    .ng-touched[class*='ng-warning']:not(:focus),
    .ng-submitted [class*='ng-warning']:not(:focus) {
        display: block;
        border-color: orange;
        box-shadow: inset 0 1px 2px rgba(orange, .3), 0 0 0 0.2em rgba(orange, .3);
        & + [ng-messages] { color: orange }
        // it's only visible on blur
        & + [ng-messages] .ng-messages-warning { display: block }
    }
}

.bugModalView-input-file { display: none }
.pm_form .bugModalView-input-label {
    text-decoration: none;
    color: $button-color;
    padding: 0 10px;
    height: 35px;
    line-height: 35px;
    border: 1px solid $border;
    border-radius: $border-radius;
    display: inline-block;
    cursor: pointer;
    font-size: 12px;
    text-transform: uppercase;
    background-color: transparent;
    transition: all .3s ease-out;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.1);
    vertical-align: middle;
}

.bugModalView-input-label:hover {
    background-color: $button-background-focus;
    color: $button-color-focus;
    transition: none;
}

.bugModalView-upload-success-message {
    font-weight: bold;
    margin-right: 20px;
}

.bugModalView-files-uploaded .bugModalView-input-label,
.bugModalView-files-uploaded .bugModalView-upload-info,
.bugModalView-container:not(.bugModalView-files-uploaded) .bugModalView-upload-success { display: none }

